<template>
    <div>
        <!--------------------------------------------------------------第三步,设置支付方式-->
        <div class="steps stepsThree">
            <div style="display: none;">
                <input type="password">
                <input type="password">
                <input type="password">
                <input type="text">
                <input type="text">
            </div>
            <!--第三步左边-->
            <div class="ThreeLeft">
                <p class="ThreeP"  style="font-weight: 400;">银行卡号</p>
                <p class="ThreeP">持卡人姓名</p>
                <p class="ThreeP">身份证号</p>
                <p class="ThreeP">手机号码</p>
                <p class="ThreeP">验证码</p>
            </div>
            <!--第三步左边-->
            <div class="ThreeRight">
                <!--银行卡号(只能输入数字)-->
                <div class="ThreeDiv"><input ref="ThreeBankNumber" id="ThreeBankNumber" type="text" oninput = "value=value.replace(/[^\d]/g,'')"></div>
                <!--持卡人姓名（不能输入空格）-->
                <div class="ThreeDiv"><input ref="ThreeBankName" id="ThreeBankName" type="text" oninput="value=value.replace(/\s+/g,'')"></div>
                <!--身份证号（只能输入数字跟大小写的x）-->
                <div class="ThreeDiv"><input ref="ThreeIdNumber" id="ThreeIdNumber" type="text" oninput="value=value.replace(/[^\d|Xx]/g,'')"></div>
                <!--手机号码(只能输入数字)-->
                <div class="ThreeDiv"><input ref="ThreeMobile" id="ThreeMobile" type="text" oninput = "value=value.replace(/[^\d]/g,'')" @focus="focus" @blur="blur" placeholder="此卡在银行预留手机号">
                    <!--icon图标  class名错误(el-icon-error)正确(el-icon-success)-->
                    <i :class="icon? iconClass: ''" style="margin-left: 10px;"></i></div>
                <!--验证码（不能输入空格）-->
                <div class="ThreeDiv"><input class="ThreeCode" ref="ThreeCode" id="ThreeCode" type="text" oninput="value=value.replace(/\s+/g,'')"><span @click="getCode">{{CodeText}}</span></div>
                <!-- 发送请求 -->
                <div class="toFour" @click="toFour">同意协议并确定</div>
                <div class="agreeTxt" @click="showThreeAgreeTxt"><span>查看</span><span>《快捷支付服务相关协议》</span></div>
                <div :id="isThreeAgreeTxt?'ThreeAgreeTxtB':'ThreeAgreeTxtN'">
                    <p class="ThreeAgreeTxtTop">快捷支付服务相关协议</p>
                    <div class="ThreeAgreeTxtContent">
                        <iframe src="http://localhost/HTML/index.html" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
                    </div>
                    <p class="ThreeAgreeTxtBottom">
                        <span @click="hideThreeAgreeTxt">确 定</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "RegisterThree",
        data(){
            return{
                // 储存第一步跟第二步数据
                RegisterOne:{},
                RegisterTwo:{},
                // 存储数据,第三步数据
                RegisterThree:{
                    "ThreeBankNumber":"",
                    "ThreeBankName":"",
                    "ThreeIdNumber":"",
                    "ThreeMobile":"",
                    "ThreeCode":""
                },
                // -------------------------------绑定手机号步骤三data值
                // 第一步,判断手机号格式是否正确
                isMobile: false,
                //是否显示手机号码输入框后面的icon
                icon:false,
                // 手机号输入框后面icon的class
                iconClass:'el-icon-success colorGreen',
                CodeText: "获取验证码",
                // 获取手机验证码倒计时是否为0
                isZero: false,
                // 判断协议框是否显示
                isThreeAgreeTxt:false,
            }
        },
        methods:{
            // -------------------------------------------------------------------------------------------第三步事件
            // 点击查看显示协议
            showThreeAgreeTxt(){
                this.isThreeAgreeTxt = true;
            },
            // 点击确定隐藏协议
            hideThreeAgreeTxt(){
                this.isThreeAgreeTxt = false;
            },
            // 手机号输入框获取焦点
            focus(){
                this.icon = false;
            },
            // 手机号input框失去焦点
            blur(){
                this.icon = true;
                // -------------------------------------------手机号输入框不为空
                if(this.$refs.ThreeMobile.value != ''){
                    // 判断手机号是否为真
                    this.isMobile = this.global.mobleVerify(this.$refs.ThreeMobile.value);
                    if(this.isMobile){
                        //手机号格式对
                        this.iconClass = "el-icon-success colorGreen";
                    }else{
                        //手机号格式不对
                        this.iconClass = "el-icon-error colorRed";
                    }
                }else{
                    //------------------------------------------手机号输入框为空
                    this.iconClass = "el-icon-error colorRed";
                }
            },
            // 获取验证码
            getCode(){
                if(this.isMobile){
                    // 本地存储手机号
                    this.RegisterThree.ThreeMobile = this.$refs.ThreeMobile.value;
                    var num = 60;
                    // 判断倒计时是否为零
                    if(this.isZero){
                        // 如果正在倒计时弹出请60秒后再试
                        this.$message.closeAll();
                        this.$message({
                            message: '请60秒后再试!',
                            type: 'warning'
                        });
                        return;
                    }
                    // 如果手机号格式正确,获取验证码,倒计时
                    this.$message.closeAll();
                    this.$message({
                        message: '发送验证码成功!请注意查收',
                        type: 'success'
                    });
                    this.isZero = true;
                    num = num - 1;
                    this.CodeText = "重发（" + num + "s）";
                    var getCode = setInterval(()=>{
                        if(num == 1){
                            this.isZero = false;
                            clearInterval(getCode);
                            this.CodeText = "获取验证码";
                            return;
                        }
                        num = num - 1;
                        this.CodeText = "重发（" + num + "s）";
                    },1000)
                }else{
                    this.$message.closeAll();
                    this.$message.error('您输入的手机号格式有误,请重新输入');
                }
            },
            // 同意协议并确定
            toFour(){
                if(this.$refs.ThreeBankNumber.value == "" || this.$refs.ThreeBankName.value == "" || this.$refs.ThreeIdNumber.value == "" || this.$refs.ThreeMobile.value == "" || this.$refs.ThreeCode.value == "" ){
                    this.$message.closeAll();
                    this.$message.error('请把信息填写完整!');
                    return;
                }
                // 储存第三步数据
                this.RegisterThree.ThreeBankNumber = this.$refs.ThreeBankNumber.value;
                this.RegisterThree.ThreeBankName = this.$refs.ThreeBankName.value;
                this.RegisterThree.ThreeIdNumber = this.$refs.ThreeIdNumber.value;
                this.RegisterThree.ThreeMobile = this.$refs.ThreeMobile.value;
                this.RegisterThree.ThreeCode = this.$refs.ThreeCode.value;
                // 本地存储第三步数据(过期时间5分钟)
                localStorage.setExpire("RegisterThree",JSON.stringify(this.RegisterThree),1000*60*10);
                console.log(JSON.parse(JSON.stringify(this.RegisterOne)));
                console.log(this.RegisterOne);
                var data = {};
                axios.post("userRegister",data).then(res=>{
                    if(res.status == 200){
                        console.log(res);
                        if(res.data.status != 200){
                            alert('页面之间的错误');
                            return;
                    }
                    }else{
                        console.log(res);
                    }
                });
                return;
                // 成功跳转
                this.$router.push("/registerFour");
            },
        },
        mounted(){
            // 判断第一步和第二步数据是否还在
            if(localStorage.getExpire("RegisterOne") && localStorage.getExpire("RegisterTwo")){
                this.RegisterOne = JSON.parse(localStorage.getExpire("RegisterOne"));
                this.RegisterTwo = JSON.parse(localStorage.getExpire("RegisterTwo"));
                // 获取存储的数据,页面赋值
                if(localStorage.getExpire("RegisterThree")){
                    var RegisterThree = JSON.parse(localStorage.getExpire("RegisterThree"));
                    $("#ThreeBankNumber").val(RegisterThree.ThreeBankNumber);
                    $("#ThreeBankName").val(RegisterThree.ThreeBankName);
                    $("#ThreeIdNumber").val(RegisterThree.ThreeIdNumber);
                    $("#ThreeMobile").val(RegisterThree.ThreeMobile);
                    $("#ThreeCode").val(RegisterThree.ThreeCode);
                    this.blur();
                }
            }else{
                this.$message.closeAll();
                this.$message.error('数据丢失请重新填写!');
                this.$router.push("register");
                return;
            }
            //在页面刷新时步骤index保存到localStorage里
            window.addEventListener("beforeunload",()=>{
                localStorage.setItem("RegisterIndex",3);
            });
        }
    }
</script>

<style scoped>

    /***************************************************************中心Three步骤三*/
    .stepsThree{
        position: relative;
        padding-top: 40px;
    }
    .ThreeLeft{
        width: 52%;
        float: left;
        text-align: right;
    }
    .ThreeRight{
        width: 46.5%;
        float: right;
    }
    .ThreeP{
        font-size: 16px;
        color: #333333;
        height: 50px;
        line-height: 50px;
        margin-bottom: 20px;
    }
    .ThreeDiv{
        height: 50px;
        line-height: 50px;
        margin-bottom: 20px;
    }
    .ThreeDiv input{
        width:290px;
        height:38px;
        font-size: 16px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        text-indent: 10px;
    }
    .ThreeDiv .ThreeCode{
        width:170px;
        font-size: 15px;
    }
    .ThreeDiv span{
        display: inline-block;
        width:110px;
        height:38px;
        line-height: 38px;
        font-size:16px;
        color:rgba(250,61,13,1);
        text-align: center;
        background:rgba(250,250,250,1);
        border:1px solid rgba(217,217,217,1);
        border-radius:5px;
        cursor: pointer;
        margin-left: 10px;
    }
    .toFour{
        width:220px;
        height:40px;
        line-height: 40px;
        text-align: center;
        font-size:20px;
        color:rgba(255,255,255,1);
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        cursor: pointer;
    }
    .agreeTxt{
        display: inline-block;
        margin-top: 30px;
        cursor: pointer;
    }
    .agreeTxt span:nth-child(1){
        font-size:12px;
        font-weight:600;
        color:rgba(51,51,51,1);
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }
    .agreeTxt span:nth-child(2){
        font-size:12px;
        color: #2A91FE;
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }
    /* 第三步弹出支付协议框 */
    #ThreeAgreeTxtB{
        width: 637px;
        height: 482px;
        background: #ffffff;
        border:1px solid #BFBFBF;
        box-shadow:0px 3px 10px 0px #999999;
        position: absolute;
        top: 45px;
        left: 420px;
        z-index: 30;
        display: block;
    }
    #ThreeAgreeTxtN{
        width: 637px;
        height: 482px;
        background: #ffffff;
        border:1px solid #BFBFBF;
        box-shadow:0px 3px 10px 0px #999999;
        position: absolute;
        top: 45px;
        left: 420px;
        z-index: 30;
        display: none;
    }
    /* 协议框第一行 */
    .ThreeAgreeTxtTop{
        font-size:20px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color: #000000;
        margin: 0 25px;
        line-height:50px;
        border-bottom: 1px solid #D9D9D9;
    }
    /* 协议框中心内容 */
    .ThreeAgreeTxtContent{
        height: 340px;
        margin: 0 25px;
    }
    /* 协议框底部确定 */
    .ThreeAgreeTxtBottom{
        background: #EBEBEB;
        width: 637px;
        height: 82px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
    }
    .ThreeAgreeTxtBottom span{
        display: inline-block;
        width: 110px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background: #00a3d2;
        font-size:20px;
        font-family:"PingFang-SC-Bold";
        font-weight:bold;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
        cursor: pointer;
    }

    /*浮动*/
    .left{
        float: left;
    }
    .right{
        float: right;
    }

    .colorRed{
        color: red;
    }
    .colorGreen{
        color: green;
    }
</style>
